<template>
  <div>
    <h3>
      <i class="ace-icon fa fa-hand-o-right icon-animated-hand-pointer blue"></i>&nbsp;
      <router-link to="/business/course" class="pink">课程名称： {{ course.name }}</router-link>
    </h3>
    <hr>

    <file v-bind:input-id="'content-file-upload'"
          v-bind:text="'上传文件'"
          v-bind:use="FILE_USE.COURSE.key"
          v-bind:suffixs="['jpg', 'jpeg', 'png', 'mp4']"
          v-bind:after-upload="afterUploadContentFile"></file>
    <br>

    <table id="file-table" class="table table-bordered table-hover">
      <thead>
      <tr>
        <th>名称</th>
        <th>地址</th>
        <th>大小</th>
        <th>操作</th>
      </tr>
      </thead>

      <tbody>
      <tr v-for="(f, i) in files" v-bind:key="f.id">
        <td>{{ f.name }}</td>
        <td>{{ f.url }}</td>
        <td>{{ f.size | formatFileSize }}</td>
        <td>
          <button v-on:click="delFile(f)" class="btn btn-white btn-danger btn-round">
            <i class="ace-icon fa fa-trash-o bigger-120"></i>
            删除
          </button>
        </td>
      </tr>
      </tbody>
    </table>

    <!--  模态框中的表单  -->
    <form class="form-horizontal">

      <div class="form-group">
        <!--  显示最后一次更新时间的区域  -->
        <div class="col-lg-12">
          {{ saveContentLabel }}
        </div>
      </div>

      <div class="form-group">
        <div class="col-lg-12">
          <!--  富文本编辑器区域  -->
          <div id="content"></div>
        </div>
      </div>
    </form>
    <button class="btn btn-white btn-lg btn-info btn-round" @click="saveContent()">
      <i class="ace-icon fa fa-save blue"></i>
      保存
    </button>&nbsp;
    <!--  从大章返回课程的按钮  -->
    <router-link class="btn btn-white btn-default btn-round" to="/business/course">
      <i class="ace-icon fa fa-arrow-left"></i>
      返回课程
    </router-link>
  </div>

</template>

<script>
import File from "../../components/file"

export default {
  components: {File},
  name: "business-course-content",
  data: function () {
    return {
      // 用来映射表单的数据
      course: {},
      FILE_USE: FILE_USE,
      saveContentLabel: "",
      files: [],
      saveContentInterval: {},
    }
  },
  // 当组件生命周期结束时，也就是当页面关闭时
  destroyed: function () {
    let _this = this;
    console.log("组件销毁");
    // 清空定时任务
    clearInterval(_this.saveContentInterval);
  },
  mounted: function () {
    let _this = this;

    let course = SessionStorage.get(SESSION_KEY_COURSE) || {};
    if (Tool.isEmpty(course)) {
      _this.$router.push("/welcome");
    }
    _this.course = course;

    // 调用初始化方法
    _this.init();

    // 将左侧栏的样式激活
    this.$parent.activeSidebar("business-course-sidebar");
  },
  methods: {
    // 打开内容编辑框
    // 打开内容编辑框
    init() {
      let _this = this;
      let course = _this.course;
      let id = course.id;
      // 在id为content的div中渲染富文本编辑器
      $("#content").summernote({
        focus: true,
        height: 300
      });

      // 先将历史文本进行清空
      $("#content").summernote('code', '');
      _this.saveContentLabel = "最后保存时间：";

      // 加载内容文件列表
      _this.listContentFiles();

      _this.$ajax.get(process.env.VUE_APP_SERVER + '/business/admin/course/find-content/' + id).then((result) => {
        let response = result.data;
        // 如果响应成功
        if (response.success) {
          // 设置点击模态框空白位置模态框不会关闭
          $("#course-content-modal").modal({backdrop: 'static', keyboard: false});
          if (response.content) {
            $("#content").summernote('code', response.content.content);
          }

          /**
           * 定时自动保存
           * setInterval：重复的定时任务
           * setTimeout：只执行一次的定时任务
           */
          _this.saveContentInterval = setInterval(function () {
            _this.saveContent();
            // 每5秒进行一次自动保存
          }, 5000);
          // 关闭内容框时，清空自动保存任务
          $('#course-content-modal').on('hidden.bs.modal', function (e) {
            clearInterval(saveContentInterval);
          })
        } else {
          Toast.warning(response.message);
        }
      });
    },
    // 保存内容
    saveContent() {
      let _this = this;
      // 读取文本框中的HTML代码
      let content = $("#content").summernote("code");
      _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/admin/course/save-content', {
        id: _this.course.id,
        content: content
      }).then((result) => {
        let response = result.data;
        if (response.success) {
          // Toast.success("内容保存成功！");
          // let now = Tool.dateFormat("yyyy-MM-dd hh:mm:ss");
          let now = Tool.dateFormat("yyyy-MM-dd hh:mm:ss");
          _this.saveContentLabel = "最后保存时间：" + now;
        } else {
          Toast.warning(response.message);
        }
      });
    },
    /**
     * 加载文件列表
     */
    listContentFiles() {
      let _this = this;
      _this.$ajax.get(process.env.VUE_APP_SERVER + '/business/admin/course-content-file/list/' + _this.course.id).then((response)=>{
        let result = response.data;
        if (result.success) {
          // 将查询到的所有的值都赋值给files数组
          _this.files = result.content;
        }
      });
    },
    // 上传文件内容后，保存内容文件记录
    afterUploadContentFile(response) {
      let _this = this;
      console.log("开始保存文件记录")
      let file = response.content;
      file.courseId = _this.course.id;
      file.url = file.path;
      _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/admin/course-content-file/save', file).then((response) => {
        let result = response.data;
        if (result.success) {
          Toast.success("文件上传成功");
          _this.files.push(result.content);
        }
      });
    },
    // 删除内容文件
    delFile(f) {
      let _this = this;
      Confirm.show("文件删除后不可恢复，确定删除？", function () {
        _this.$ajax.delete(process.env.VUE_APP_SERVER + '/business/admin/course-content-file/delete/' + f.id).then((response) => {
          let result = response.data;
          if (result.success) {
            Toast.success("删除文件成功");
            // 将当前file数组中对应的file文件进行删除
            Tool.removeObj(_this.files, f);
          }
        });
      });
    },
  }
}
</script>

<style scoped>

</style>
